<template>
	<view>
		<uni-list :border="false" class="info">
			<list-chat v-for="(item,index) in showMsg" :key="index" :border="false" :avatarCircle="true" time="刚刚"
				avatar="https://waibi.oss-cn-chengdu.aliyuncs.com/2020-06-01/head.jpg" :note="item.value">
			</list-chat>
		</uni-list>
		<view class="send-msg-content white-background">
			<input class="uni-input send-msg" confirm-type="send" v-model="message" placeholder="" />
			<button @click="sendMsg" size="mini" class="send-msg-btn" type="default">发送</button>
		</view>
	</view>
</template>

<script>
	import listChat from '../../../components/list-chat/list-chat.vue'
	export default {
		components: {
			listChat
		},
		data() {
			return {
				socketOpen: false,
				message: '',
				socketMsgQueue: [],
				showMsg: []
			};
		},
		beforeDestroy() {
			uni.closeSocket() //关闭socket
		},
		onLoad(e) {
			console.log(e)
			uni.setNavigationBarTitle({
				title: e.id
			});
			this.initChat()
		},
		methods: {
			initChat() {
				uni.closeSocket()
				uni.connectSocket({
					url: 'ws://192.168.56.1:8090/ws',
					data() {
						return {
							type: "login",
							token: "2222"
						}
					},
					header: {
						'content-type': 'application/json'
					},
					method: 'GET'
				});
				uni.onSocketOpen(function(res) {
					this.socketOpen = true
					console.log('WebSocket连接已打开!');
				});
				var that = this
				uni.onSocketMessage(function(res) {
					var data = JSON.parse(res.data)
					console.log('收到服务器内容：', data);
					that.showMsg.push(data)
				});
			},
			sendMsg() {
				if (this.message == null || this.message.trim() === "") {
					return;
				}
				console.log(this.message)
				var send = uni.sendSocketMessage({
					data: JSON.stringify({
						type: "sendGroup",
						groupId: "2",
						token: "2222",
						value: this.message
					})
				});
				console.log(send)
			}
		}
	};
</script>

<style>
	@charset "UTF-8";

	.send-msg {
		width: 500rpx;
		display: inline-block;
		border-radius: 5px;
		border-color: #d0d0d0;
		border-width: 1px;
		border-style: solid;
		margin: 0 15rpx;
	}

	.send-msg-btn {
		background-color: #00bb00;
		color: #FFFFFF;
		margin-left: 10rpx;
		min-width: 130rpx;
		min-height: 80rpx;
		padding: 5px 0;
	}

	.send-msg-content {
		position: fixed;
		bottom: 0rpx;
		height: fit-content;
		width: 100vh;
		padding-top: 10rpx;
	}

	.white-background {
		background-color: #f4f4f4;
	}

	.info {
		padding: 0;
		margin: 0;
		min-height: 100vh;
	}
</style>
